<script setup>
import { open } from '@tauri-apps/plugin-dialog'
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
import Button from '@/components/common/Button.vue'
import { upload } from '@/native'
const files = ref([]);
const isDragging = ref(false);
// const progress = ref('');
// const error = ref('');
const init = async () => {
	try {
		const window = getCurrentWebviewWindow();
		// 监听拖拽进入
		window.listen('tauri://drag-enter', () => {
			isDragging.value = true;
			// console.log('监听拖拽进入')
		});
		// 监听拖拽离开
		window.listen('tauri://drag-leave', () => {
			isDragging.value = false;
			// console.log('监听拖拽离开')
		});
		// 监听拖拽释放
		window.listen('tauri://drag-drop', (event) => {
			// console.log('监听拖拽释放')
			// console.log('文件绝对路径:', event.payload.paths);
			isDragging.value = false;
			handleDrop(event.payload.paths)
		});
	} catch (error) {
		console.error(error)
	}
};
onMounted(() => {
	init()
});
const uploadTrigger = async () => {
	const file = await open()
	setFile(file)
	console.log(files.value)
}
const handleDrop = (paths) => {
	// console.log('handleDrop', paths)
	paths.forEach(path => {
		setFile(path)
	});
};
const setFile = (file) => {
	const isExits = files.value.some(file => file.filePath === file);
	if (file && !isExits) {
		files.value.push({
			uploaded: false,
			filePath: file,
			fileName: file.split('/').pop(),
		})
	}
}
const removeFile = (filePath) => {
	const index = files.value.findIndex(file => file.filePath === filePath);
	if (index > -1) {
		files.value.splice(index, 1)
	}
}
const uploadHandle = async () => {
	for (let i = 0; i < files.value.length; i++) {
		const { filePath, fileName, uploaded } = files.value[i];
		if (uploaded) {
			continue
		}
		try {
			await upload(filePath, fileName)
			// console.log('上传成功', filePath)
			files.value[i].uploaded = true
		} catch (error) {
			console.error('上传失败', file, error)
		}
	}
}
</script>
<template>
	<div class="upload-area" :class="[isDragging ? 'isDragging' : '']" @click="uploadTrigger" @dragover.prevent
		@drop="handleDrop">
		<template v-if="!isDragging">
			<div class="cross-icon"></div>
			<div class="upload-text">点击或拖拽文件到此处</div>
		</template>
	</div>
	<div class="file-list">
		<div class="file-item" v-for="file in files">
			<div v-if="file.uploaded" class="no-select">✅</div>
			<div class="file-name hide-scrollbar">{{ file.filePath }}</div>
			<div class="close no-select" @click="removeFile(file.filePath)">❌</div>
		</div>
	</div>
	<Button block @click="uploadHandle">上传</Button>
</template>
<style scoped lang="less">
.upload-area {
	width: 300px;
	height: 200px;
	border: 2px dashed #aaa;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
	background-color: #f9f9f9;

	&.isDragging {
		border-color: #4CAF50;
		background-color: #f0f7ff;
	}
}

.upload-area:hover {
	border-color: #4CAF50;
	background-color: #f0f7ff;
}

/* 十字图标 */
.cross-icon {
	position: relative;
	width: 40px;
	height: 40px;
}

.cross-icon::before,
.cross-icon::after {
	content: "";
	position: absolute;
	background: #888;
}

.cross-icon::before {
	width: 100%;
	height: 4px;
	top: 50%;
	transform: translateY(-50%);
}

.cross-icon::after {
	height: 100%;
	width: 4px;
	left: 50%;
	transform: translateX(-50%);
}

/* 悬停效果 */
.upload-area:hover .cross-icon::before,
.upload-area:hover .cross-icon::after {
	background: #4CAF50;
}

.upload-text {
	margin-top: 15px;
	color: #666;
	font-size: 16px;
}

.file-list {
	width: 300px;
	overflow-y: auto;
	height: 300px;
	margin-top: 5px;
	font-size: 12px;

	.file-item {
		display: flex;
		margin-bottom: 5px;
	}

	.file-name {
		overflow-x: auto;
		user-select: none;
		border-radius: 5px;
		padding: 2px 10px;
		background-color: #f1f1f1;
		border: 1px solid #ccc;
		flex: 1;
		margin-right: 10px;
		overflow-x: auto;
	}

	.close {
		cursor: pointer;
		color: #ed6161;
	}
}
</style>
